{extend name="public/base" /}
{block name="head"}
{/block}
{block name="body"}
<style type="text/css">
.el-input{width: 56px;position: relative;}
.el-input input{width: 50px;height: 22px;line-height: 30px;}
</style>
<div id="fuyun-app" class="fuyun-app">
  <div class="content-box">
    <div class="fuyun-title">
      <h5>后台菜单列表</h5>
      <a href="{:Url('create')}" class="layui-btn fuyun-add-btn layui-btn-small layui-btn-normal"><i class="fa fa-plus-square margin-right-5"></i>添加菜单</a>
    </div>
    <div class="main-box">
      <div class="tree-box">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          :default-expand-all = "expand_all"
          :expand-on-click-node="true"
          :render-content="renderContent">
        </el-tree>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  let id = 1000;
  var Main = {
    data() {
      return {
        treeData: <?=json_encode($menuList)?>,
        defaultProps: {
          children: 'children',
          label: 'menu_name',
        },
        expand_all: false,
        tree:[],
      }
    },

    methods: {
      renderContent(createElement, { node, data, store }) {
        var id = node.data.id;
        var add_url = "{:Url('create')}?id="+node.data.id;
        var edit_url = "{:Url('update')}?id="+node.data.id;
        // store.remove(data);
        this.tree[id] = {store:store,data:data};
        return createElement("span",[
          createElement("span",[
            createElement("span",node.data.menu_name),
            createElement("span","("+node.data.id+")"),
          ]),
          createElement("span",{
            attrs:{
              style: "float: right; margin-right: 20px;"
            }
          },[
            createElement("el-input",{attrs:{onchange:"change("+node.data.id+",this)",value:node.data.sort}}),
            createElement("el-button",{attrs:{size:"mini","onclick":"window.location.href='"+edit_url+"'" }},"编辑"),
            createElement("el-button",{attrs:{size:"mini","onclick":"del(this,"+id+")",'data-id':node.data.id,}},"删除"),
          ])
        ]);
      }
    },
  };
  var Ctor = Vue.extend(Main)
  var vw = new Ctor()
  vw.$mount('#fuyun-app')

  layui.use('layer', function(){

  });
  function del(obj,id){
    var id = $(obj).data("id");
    var layerDelIndex = layer.confirm("是否确定删除？", {
      btn: ['是','否'] //按钮
    }, function(){
      $.ajax({
        type:'post',
        url: "{:Url('deleteall')}",
        data:{id:id},
        dataType:'json',
        success: function(data){
          if(data['status'] == 200){
            $("tr[data-id='"+id+"']").remove();
            layer.msg("删除成功！");
            layer.close(layerDelIndex);
            vw.tree[id].store.remove(vw.tree[id].data);
          }else{
            layer.msg(data['msg']);
          }
        }
      });
    }, function(){
      return;
    });
  }


  function change(id,obj){
    var sort = $(obj).find("input").val();
    $.ajax({
      type:'post',
      url: "{:Url('/admin/menu/changeSalt')}",
      data:{id:id,sort:sort},
      dataType:'json',
      success: function(data){
        layer.msg("修改成功！");
      }
    });
  }
</script>

{/block}
